<template>
	<view style="width: 650upx;margin: 0 auto;">
		<u--form :model="form" :rules="rules" ref="uForm">
			<u-form-item prop="name">
				<u-input color="#ffffff" size="large" v-model="form.name" prefixIconStyle="color:#ffffff" placeholder="请输入姓名"
					disableDefaultPadding prefixIcon="account-fill" style="background: rgba(255,255,255,.1);color: #fff;"
					shape="circle" />
			</u-form-item>
			<u-form-item prop="mobile">
				<u-input color="#ffffff" size="large" v-model="form.mobile" prefixIconStyle="color:#ffffff" placeholder="请输入手机号"
					disableDefaultPadding prefixIcon="phone-fill" style="background: rgba(255,255,255,.1);color: #fff;"
					shape="circle" />
			</u-form-item>
			<u-form-item prop="email">
				<u-input color="#ffffff" size="large" v-model="form.email" prefixIconStyle="color:#ffffff" placeholder="请输入邮箱"
					disableDefaultPadding prefixIcon="email-fill" style="background: rgba(255,255,255,.1);color: #fff;"
					shape="circle" />
			</u-form-item>
			<u-form-item prop="password">
				<u-input color="#ffffff" size="large" v-model="form.password" prefixIconStyle="color:#ffffff" placeholder="请输入密码"
					disableDefaultPadding prefixIcon="lock-fill" style="background: rgba(255,255,255,.1);color: #fff;"
					shape="circle" />
			</u-form-item>
			<u-form-item prop="emailCode">
				<u-input color="#ffffff" size="large" v-model="form.emailCode" prefixIconStyle="color:#ffffff"
					placeholder="请输入验证码" disableDefaultPadding prefixIcon="coupon-fill"
					style="background: rgba(255,255,255,.1);color: #fff;" shape="circle">
					<template slot="suffix">
						<u-button @tap="getCode" :text="codeText" :disabled="disabled" type="success" size="mini">
						</u-button>
					</template>
				</u-input>
			</u-form-item>
		</u--form>
		<u-button shape="circle" size="large" color="linear-gradient(to right, rgb(66, 83, 216), rgb(213, 51, 186))"
			style="margin-top: 40upx;" @click="login">注 册</u-button>
		<!-- <u-button shape="circle" size="large" color="linear-gradient(to right, rgb(0, 0, 0), rgb(0, 0, 0))" style="margin-top: 40upx;" @click="login">登录</u-button> -->
	</view>
</template>

<script>
	export default {
		data() {

			return {
				tips: '',
				form: {
					isMobile: 1,
					name: '',
					password:'',
					mobile: '',
					emailCode: '',
				},
				codeText: '获取验证码',
				disabled: false,
				timer: null,
				rules: {
					name: [{
						required: true,
						message: '请输入姓名',
						trigger: ['blur', 'change']
					}],
					mobile: [{
						required: true,
						message: '请输入手机号',
						trigger: ['blur', 'change']
					}],
					password: [{
						required: true,
						message: '请输入密码',
						trigger: ['blur', 'change']
					}],
					email: [{
						required: true,
						message: '请输入手机号',
						trigger: ['blur', 'change']
					}],
					emailCode: [{
						required: true,
						message: '请输入验证码',
						trigger: ['blur', 'change']
					}]
				}
			};
		},
		methods: {
			login() {
				this.$refs.uForm.validate().then(res => {
					this.https('/auth/register/email', this.form).then(res => {
						if (res.status == 200) {
							uni.showToast({
								title: '注册成功！',
								icon: 'success'
							})
							setTimeout(() => {
								uni.redirectTo({
									url: '/pages/login/login'
								})
							}, 1000)
						}
					})
				})
			},
			getData() {
				this.https('/client/getFunctionState', {}).then(res => {
					if (res.status == 200) {
						console.log(res.data.isOpenGpt)
						uni.setStorageSync('isOpenGpt', res.data.isOpenGpt)
					}
				})
			},

			getCodes() {
				const TIME_COUNT = 60
				if (!this.timer) {
					this.time = TIME_COUNT
					this.disabled = true
					this.timer = setInterval(() => {
						if (this.time > 0 && this.time <= TIME_COUNT) {
							this.time--
							this.codeText = this.time + 's后获取'
						} else {
							this.disabled = false
							this.codeText = '获取验证码'
							clearInterval(this.timer)
							this.timer = null
						}
					}, 1000)
				}
			},
			getCode() {
				if (this.form.email) {
					this.getCodes()
					this.https('/send/email', {
						email: this.form.email,
						mobile: this.form.mobile
					}).then(res => {
						if (res.status != 200) {
							uni.showToast({
								title: res.msg,
								icon: 'error'
							})
						} else {
							uni.showToast({
								title: '邮件已发送',
								icon: 'success'
							})
						}
					})
				}else{
					uni.showToast({
						title: '请输入邮箱地址',
						icon: 'error'
					})
				}
			},
		}
	}
</script>

<style lang="scss">

</style>